<template>
  <div class="blackname">
    <div v-show="blacknameDisplay">
      <!-- 头部 -->
      <div class="my_header">
        <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="gocener"></i>
        <div class="top1">上传黑名单</div>
      </div>
      <!-- 表单内容 -->
      <form class="mui-input-group">
        <div class="mui-input-row">
          <label><span class="star">*</span>员工姓名</label>
          <input type="text" class="mui-input-clear" v-model="lostuserdata.name" placeholder="请输入姓名">
        </div>
        <div class="mui-input-row sex">
          <label><span class="star">*</span>性别</label>
          <div class="sexright">
            <el-radio class="boy" v-model="lostuserdata.sex" label="男">男</el-radio>
            <el-radio class="boy" v-model="lostuserdata.sex" label="女">女</el-radio>
          </div>
        </div>
        <div class="mui-input-row">
          <label><span class="star">*</span>联系电话</label>
          <input type="text" class="mui-input-clear" placeholder="请输入手机号码" v-model="lostuserdata.mobile">
        </div>
        <div class="mui-input-row">
          <label><span class="star">*</span>身份证号</label>
          <input type="text" class="mui-input-clear" placeholder="请输入身份证号" v-model='lostuserdata.card'>
        </div>
        <div class="mui-input-row" @click="openxueli">
          <label><span class="star star1">*</span>最高学历</label>
          <input id="date" type="text" readonly="readonly" class="mui-input-clear" v-model="xueliname"
                 placeholder="请选择">
        </div>
        <van-popup v-model="show" position="bottom" :overlay="false">
          <van-picker show-toolbar :columns="xuelilist" @cancel="onCancel" @confirm="onConfirm"/>
        </van-popup>

        <div class="mui-input-row diqu">
          <label><span style="visiability:hidden" class="star star1">*</span>所在地区</label>
          <el-cascader style="text-align: right;float:right;" id="area" :options="options" v-model="selectedOptions"
                       @change="handleChange">
          </el-cascader>
        </div>

      </form>
      <!-- 表单内容2 -->
      <form id="form1" class="mui-input-group">
        <div class="mui-input-row">
          <label id="label1"><span class="star">*</span>黑名单类型</label>
          <div class="blacktype">
            <div v-for="(v,i) in lost_type_id">
              <input type="text" readonly="readonly" class="mui-input-clear" @click="openlost(i)"
                     v-model='lost_type_id[i].lostname' placeholder="请选择">
            </div>
            <img src="../../../static/icon_pc/icon/icon_add.png" @click="addmdtype" v-show="addmdtypehide">
          </div>
        </div>
        <van-popup v-model="show1" position="bottom" :overlay="false">
          <van-picker show-toolbar :columns="lostlist" @cancel="onCancel" @confirm="onConfirm2"/>
        </van-popup>
        <div class="bottline mui-input-row">
          <label id="label1"><span class="star">*</span>事件描述</label>
          <input id='desp' type="text" class="mui-input-clear" v-model='lostuserdata.content' placeholder="请对该事件进行描述">
        </div>
        <div id="nametype1" class="mui-input-row">
          <label id="label1 item"><span style="visiability:hidden" class="star star1">*</span>上传证据</label>

          <div class="upimgdiv item">
            <el-upload action="http://zcapi.hrgsxt.cn/admin/Upload/index" ref='upload' name="attest_img" multiple
                       :limit="limitnum" :on-exceed="cccount" :on-success="uploadimg" list-type="picture-card"
                       :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                       :before-upload="beforeAvatarUpload">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </div>
      </form>
      <!-- 表单内容3-->
      <form id="form1" class="mui-input-group">
        <div class="mui-input-row">
          <label>工作履历</label>
        </div>
        <div class="lvdiv" v-for="(v,i) in resume_list">
          <div class="mui-input-row lvli">
            <div class="time">
              <img src="static/icon_pc/icon/icon_add.png" v-show="resume_list[i].addjian==true" alt=""
                   style="margin-right: 5px;" @click="addlvli">
              <img src="static/icon_pc/icon/icon_less.png" v-show="resume_list[i].addjian==false" alt=""
                   style="margin-right: 5px;" @click="deletelvli(i)">
              <span v-text="resume_list[i].s_time==''?'开始时间':resume_list[i].s_time" @click="openstartime(i,0)"></span> -
              <span v-text="resume_list[i].e_time==''?'结束时间':resume_list[i].e_time" @click="openstartime(i,1)"></span>
              <span><input id="date" type="text" class="mui-input-clear zhiwei" v-model="resume_list[i].position"
                           placeholder="职位"></span>
              <span><input id="date" type="text" class="mui-input-clear zhiwei" v-model="resume_list[i].salary"
                           placeholder="薪资"></span>
            </div>
          </div>

        </div>

        <!--时间选择器-->
        <van-popup v-model="opendate" position="bottom" :overlay="false">
          <van-datetime-picker v-model="currentDate" type="date" @cancel="onCancel" @confirm="onConfirmtime"/>
        </van-popup>
        <!--薪资选择器-->
        <van-popup v-model="openxinzi" position="bottom" :overlay="false">
          <van-picker show-toolbar :columns="xinzilist" @cancel="onCancel" @confirm="onConfirmxinzi"/>
        </van-popup>

      </form>
      <!-- 表单内容4-->
      <form id="form1" class="mui-input-group">
        <div class="mui-input-row">
          <label style="min-width: 3.5rem">不允许隐藏该黑名单</label>
          <van-checkbox class="mui-input-clear" style="float: right;margin-right: 0.3rem" v-model="isHideBlackList">

          </van-checkbox>
        </div>
        <div class="mui-input-row">
          <label>追偿金额</label>
          <input type="number" class="mui-input-clear" placeholder="请输入追偿金额" v-show="!isHideBlackList"
                 style="text-align: right" v-model='lostuserdata.money'>
          <input type="number" class="mui-input-clear" placeholder="请输入追偿金额" v-show="isHideBlackList"
                 readonly="readonly" v-model='lostuserdata.money'>
        </div>
      </form>
      <!-- 阅读并同意 -->
      <div class="agree">
        <el-checkbox v-model="checked">阅读并同意</el-checkbox>
        <!-- <router-link to="/disclaimer"> -->
        <a href="javascript:void(0)" @click="showDisclarmer()">免责申明</a>
        <!-- </router-link> -->
      </div>
      <!-- 提交按钮 -->
      <div class="button">
        <button class="btn" @click="submitlost">提交</button>
      </div>
    </div>

    <!-- 免责声明显示 -->
    <div class="pact" v-show="displayDisclaimer">
      <!-- 头部 -->
      <div class="my_header">
        <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="disBlackname()"></i>
        <div class="top1">免责声明</div>
      </div>
      <!-- 协议内容 -->
      <div class="title">
        <h4>免责声明</h4>
        <p>1、使用浙江职场官科技有限公司职场征信系统（以下简称职场征信系统）共享、查询信息前， 请您务必仔细阅读并透彻理解本声明。
        </p>
        <p>2、您可以选择不使用职场征信系统共享上传或查询信息，如果您选择使用， 您的使用行为将被视为对本声明全部内容的认可。
        </p>
        <p> 3、单位用户通过职场征信系统上传发布的信息（包括但不限于文字、数据及图表）， 必须保证共享信息的真实性、准确性、完整性、有效性等。
        </p>
        <p> 4、由共享的信息所引发的法律责任由该信息共享的单位用户自行承担，职场官对此不承担任何法律责任。</p>
        <p> 鉴于职场征信系统以单位用户自由上传信息的方式，根据您键入的关键字自动显示相关的信息， 职场失信记录的相关内容来自单位用户的上传，职场官不对其上传的内容之合法性、
          准确性、真实性、完整性、有效性、及时性、适用性、安全性负责，对于您可能从该信息中获得的资讯及享用的服务， 请审慎辨别、选择和参考，职场官将不承担任何法律责任。
        </p>
        <p> 6、任何通过使用职场征信系统搜索而显示出来的职场失信信息均为第三方制作或提供，不反映职场官之任何意见或主张， 也不表示职场官同意或支持该单位用户上传的任何内容、主张或立场。
        </p>
        <p> 7、除与职场官有另行书面约定的服务外，您应该对使用职场征信系统的结果自行承担风险，一切因使用职场征信系统而可能遭致的意外、
          侵权及其他损失（包括下载被搜索出的内容被感染电脑病毒等），职场官对其概不负责，亦不承担任何法律责任。
        </P>
        <p> 8、以下情况，职场官不做任何形式的保证：不保证搜索结果满足您的要求，不保证搜索服务不中断等。 因网络状况、通讯线路、电力故障、第三方网站等任何原因而导致您不能正常使用职场征信系统不承担任何法律责任。
        </p>
        <p> 9、职场官重视并保护所有使用职场官服务的用户的个人隐私权，详情请参隐私权政策。</p>
        <p> 10、任何单位或个人认为通过职场官显示出来的信息可能涉嫌侵犯其信息网络传播权或其他权益，应该及时向职场官提出书面权利通知，
          并提供身份证明、权属证明及详细侵权情况证明。职场官在收到上述法律文件后，将会依法尽快断开相关链接内容。
        </p>
      </div>
    </div>

  </div>
</template>

<script>
  import {formatDate} from "../../../static/js/date.js";
  export default {
    data() {
      return {
        // addpicture:true,
        // subpicture:false,
        isHideBlackList: false,  //是否允许隐藏黑名单
        compensateMoney: 0,
        blacknameDisplay: true,
        displayDisclaimer: false,
        openxinzi: false,
        opendate: false,
        show: false,
        show1: false,
        lostdetails: [],
        mfsmVisible: false,
        edicationlist: [],
        xueliname: "",
        currentDate: new Date(),
        xuelilist: [],
        losttypelist: [],
        lostlist: [],
        edication: "",
        options: [],
        selectedOptions: [],
        salarylist: [], //薪资类型
        xinzilist: [],
        dialogImageUrl: "",
        dialogVisible: false,
        limitnum: 9,
        checked: true,
        lostname: "",
        //上传黑名单数据
        lostuserdata: {
          token: "",
          name: "", //姓名
          sex: "", //性别
          mobile: "", //电话
          card: "",
          lost_type_id: "", //失信类型
          education_id: "", //学历id
          province_id: "", //省份id
          city_id: "", //城市id
          content: "", //描述
          img: "",
          money: "", //追债金额
          resume_list: [{
            addjian: true, //true代表加，false代表减
            position: "",
            s_time: "",
            e_time: "",
            salary_id: "",
            salaryname: "",
            salary: ''
          }] //工作履历
        },
        isstrarorend: "",
        dateindex: "",
        imgstring: [],
        resume_list: [{
          addjian: true, //true代表加，false代表减
          position: "",
          s_time: "",
          e_time: "",
          salary_id: "",
          salaryname: "",
          salary: ''
        }], //工作履历
        lost_type_id: [{
          lost_type_id: "",
          lostname: ''
        }], //失信类型
        losttype: [],
        losttypemoney: '',
        lostindex: '',
        addmdtypehide: true

      };
    },
    created() {
      var that = this;
      var token = localStorage.getItem("token");
      that.lostuserdata.token = token;
      that.geteducationlist(token);
      that.getloatlist();
      that.getdiqu();
      that.getsalarylist();
    },
    watch: {
      isHideBlackList() {
        if (this.isHideBlackList) {
          this.compensateMoney = this.lostuserdata.money;
          this.lostuserdata.money = 0;
          console.log('隐藏', this.lostuserdata.money, this.compensateMoney)
        } else {
          this.lostuserdata.money = this.compensateMoney;
          console.log('取消隐藏', this.lostuserdata.money, this.compensateMoney)
        }
      },
      lost_type_id: { //深度监听，可监听到对象、数组的变化
        handler(val, oldVal) {
          if (val.length == 3) {
            this.addmdtypehide = false
          }
          this.lostuserdata.money = 0;
          this.compensateMoney = 0;
          for (let i = 0; i < val.length; i++) {
            for (let j = 0; j < this.losttypelist.length; j++) {
              if (val[i].lost_type_id == this.losttypelist[j].lost_type_id) {
                if (!this.isHideBlackList) {
                  this.lostuserdata.money += parseInt(this.losttypelist[j].money);
                }
                this.compensateMoney += parseInt(this.losttypelist[j].money);
                console.log(">>>>>>>>11", this.lostuserdata.money, this.compensateMoney)
              }
            }
          }
        },
        deep: true
      },
      imgstring: {
        handler(val, oldVal) {
          console.log(val.length, oldVal.length + "哈哈");
          if (val.length == 9) {
            $(".el-upload--picture-card").addClass("disnone");
          }
        },
        deep: true
      },
      lostuserdata: {
        handler(val, oldVal) {
          if (!this.isHideBlackList) {
            var that = this;
            if (val.money == "") {
              that.lostuserdata.money = 0
            }
          }
          // if (val.money == "") {
          //   this.compensateMoney = 0
          // }
          // console.log(">>>>>>>>33",this.lostuserdata.money,this.compensateMoney)
        },
        deep: true
      }
    },
    methods: {
      //删除履历
      deletelvli(index) {
        console.log(index);
        var that = this;
        that.resume_list.splice(index, 1);
      },
      gocener() {
        this.$router.go(-1);
        // var that = this;
        // if (that.usertype == 1) {
        //   that.$router.push({
        //     path: "./Personalcenter"
        //   });
        // } else {
        //   that.$router.push({
        //     path: "./corporatecenter"
        //   });
        // }
      },
      openxinzis(index) {
        this.dateindex = index;
        this.openxinzi = true;
      },
      onConfirmxinzi(value, index) {
        var salaryindex = `${index}`;
        var salaryvalue = `${value}`;
        this.resume_list[this.dateindex].salary_id = this.salarylist[
          salaryindex
          ].salary_id;
        this.resume_list[this.dateindex].salaryname = salaryvalue;
        this.openxinzi = false;

        console.log(JSON.stringify(this.resume_list));
        // this.subpicture = true //如果数据已经添加了，显示减号
        // this.addpicture = false//如果数据已经添加了，隐藏加号
        // this.addpicture = false
      },
      //开始时间打开
      openstartime(index, isse) {
        console.log(index + ",,," + isse);
        this.opendate = true;
        this.dateindex = index;
        this.isstrarorend = isse;
      },
      //取消
      onCancel() {
        this.show = false;
        this.show1 = false;
        this.opendate = false;
        this.openxinzi = false;
      },
      //履历时间
      onConfirmtime() {
        console.log(this.dateindex + "获取的索引");
        //				  console.log(JSON.stringify(resume_list[this.dateindex])+"获取的索引数据");
        var time = this.formatDate(this.currentDate);
        if (this.isstrarorend == 0) {
          this.resume_list[this.dateindex].s_time = time;
        } else {
          this.resume_list[this.dateindex].e_time = time;
        }

        this.opendate = false;
      },
      formatDate(time) {
        var date = new Date(time);
        return formatDate(date, "yyyy-MM-dd");
      },
      //获取学历确认
      onConfirm(value, index) {
        var xueliindex = `${index}`;
        this.xueliname = `${value}`;
        this.lostuserdata.education_id = this.edicationlist[
          xueliindex
          ].education_id;
        console.log(this.lostuserdata.education_id);
        this.show = false;
      },

      //获取失信类型确认
      onConfirm2(value, index) {
        console.log('获取失信类型', value, index, this.isHideBlackList)
        var that = this;
        that.lostuserdata.money = "";
        var lostindex = `${index}`;
        that.lostname = `${value}`;
        that.lost_type_id[that.lostindex].lost_type_id = that.losttypelist[lostindex].lost_type_id;
        that.lost_type_id[that.lostindex].lostname = that.losttypelist[lostindex].name;
        that.show1 = false;

      },
      //打开失信名单选择器
      openlost(index) {
        var that = this;
        that.lostindex = index;
        this.show1 = true;
      },
      //打开学历选择器
      openxueli() {
        this.show = true;
      },
      openmfsm() {
        var that = this;
        that.mfsmVisible = true;
      },
      //添加工作履历条数
      addlvli() {
        var that = this;
        that.resume_list.push({
          addjian: true, //true代表加，false代表减
          position: "",
          s_time: "",
          e_time: "",
          salary_id: "",
          salary: '',
          salaryname: ""
        });
        for (var i = 0; i < that.resume_list.length - 1; i++) {
          that.resume_list[i].addjian = false
        }

      },
      addmdtype() {
        var that = this;
        that.lost_type_id.push({
          lost_type_id: "",
          lostname: ''
        });
        console.log(JSON.stringify(that.lost_type_id));
      },
      beforeAvatarUpload(file) {   //图片大小限制
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message('上传图片大小不能超过 2MB!');
        }
        return isLt2M;
      },
      //超出文件个数
      cccount(files, fileList) {
        this.$message("超出上传个数");
      },
      //上传证据返回的图片路径数据
      uploadimg(response, file, fileList) {
        this.imgstring = [];
        this.lostuserdata.img = [];

        for (let i = 0; i < fileList.length; i++) {
          if (fileList.length != 0) {
            this.imgstring.push(fileList[i].response.data);
          }
        }
        console.log(this.imgstring + "imgstring6666");
        var imgstring = this.imgstring.join(",");
        this.lostuserdata.img = imgstring;
        console.log(this.lostuserdata.img + "imgstring");
      },
      //删除图片
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      //预览证据图片
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //获取地区数据（json格式）
      handleChange(value) {
        var that = this;
        that.lostuserdata.province_id = value[0];
        that.lostuserdata.city_id = value[1];
        console.log(value[1]);
      },
      //获取学历类型
      geteducationlist(token) {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/Welcome/education",
          data: {
            token: token
          },
          cache: false,
          dataType: "json",
          success: function (data) {
            console.log(JSON.stringify(data) + "学历");
            if (data.code == 200) {
              for (var i = 0; i < data.data.length; i++) {
                that.xuelilist.push(data.data[i].name);
              }
              that.edicationlist = data.data;
            } else {
            }
          }
        });
      },

      //获取地区数据
      getdiqu() {
        var that = this;
        $.ajax({
          url: "http://zcapi.hrgsxt.cn/api/Welcome/province",
          type: "get",
          data: {},
          processData: false,
          contentType: false,
          success: function (data) {
            console.log(JSON.parse(data).data);
            that.options = JSON.parse(data).data;
          }
        });
      },
      //获取名单类型(测试)
      getloatlist() {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/Welcome/lost_type",
          data: {},
          cache: false,
          dataType: "json",
          success: function (data) {
            console.log(JSON.stringify(data) + "账户余额");
            if (data.code == 200) {
              for (var i = 0; i < data.data.length; i++) {
                that.lostlist.push(data.data[i].name);
              }
              that.losttypelist = data.data;
            } else {
            }
          }
        });
      },

      //获取薪资类型(测试)
      getsalarylist() {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/Welcome/salary",
          data: {},
          cache: false,
          dataType: "json",
          success: function (data) {
            console.log(JSON.stringify(data) + "账户余额");
            if (data.code == 200) {
              for (var i = 0; i < data.data.length; i++) {
                that.xinzilist.push(data.data[i].name);
              }
              that.salarylist = data.data;
            } else {
            }
          }
        });
      },
      submitlost() {
        var that = this;
        var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        var sfzreg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        console.log(that.lostuserdata);
        console.log(JSON.stringify(that.lostuserdata) + "黑名单");
        if (that.lostuserdata.name == "") {
          that.$toast({
            message: "请输入姓名",
            duration: 1000
          });
          return;
        }
        if (that.lostuserdata.sex == "") {
          that.$toast({
            message: "请选择性别",
            duration: 1000
          });
          return;
        }
        if (that.lostuserdata.mobile == "" || !reg.test(that.lostuserdata.mobile)) {
          that.$toast({
            message: "请输入有效且不为空的手机号码",
            duration: 1000
          });
          return;
        }

        if (that.lostuserdata.card == "" || !sfzreg.test(that.lostuserdata.card)) {
          that.$toast({
            message: "请输入有效且不为空的身份证号",
            duration: 1000
          });
          return;
        }
        if (that.lost_type_id[0].lost_type_id == "" && that.lost_type_id[1].lost_type_id == "" && that.lost_type_id[2].lost_type_id == "") {
          that.$toast({
            message: "请选择黑名单类型",
            duration: 1000
          });
          return;
        }
        if (that.lostuserdata.content == "") {
          that.$toast({
            message: "请输入事件描述",
            duration: 1000
          });
          return;
        }
        if (that.checked == false) {
          that.$toast({
            message: "请阅读并同意免责申明",
            duration: 1000
          });
          return;
        } else {

          for (var i = 0; i < that.lost_type_id.length; i++) {
            console.log(that.lost_type_id[i].lost_type_id + "哈哈1");
            if (that.lost_type_id[i].lost_type_id != "") {
              that.losttype.push(parseInt(that.lost_type_id[i].lost_type_id));
            }

          }
          that.lostuserdata.lost_type_id = that.losttype.join(",");
          for (var i = 0; i < that.resume_list.length; i++) {
            if (that.resume_list[i].position == "") {
              that.resume_list.splice(i, 1);
            }
          }
          for (var i = 0; i < that.resume_list.length; i++) {
            if (that.resume_list[i].position == "") {
              that.resume_list.splice(i, 1);
            }
          }
          console.log(JSON.stringify(that.resume_list));
          that.lostuserdata.resume_list = JSON.stringify(that.resume_list);

          console.log(JSON.stringify(that.lostuserdata));
          $.ajax({
            type: "post",

            url: "http://zcapi.hrgsxt.cn/api/User_lost/add",
            data: that.lostuserdata,
            cache: false,
            dataType: "json",
            success: function (data) {
              console.log(data.code + "提交黑名单");
              if (data.code == 200) {
                (that.lostuserdata.name = ""), //姓名
                  (that.lostuserdata.sex = ""), //性别
                  (that.lostuserdata.mobile = ""), //电话
                  (that.lostuserdata.card = ""),
                  (that.lostuserdata.lost_type_id = ""), //失信类型
                  (that.lostuserdata.education_id = ""), //学历id
                  (that.lostuserdata.province_id = ""), //省份id
                  (that.lostuserdata.city_id = ""), //城市id
                  (that.selectedOptions = []),
                  (that.lostuserdata.content = ""), //描述
                  (that.lostuserdata.img = ""),
                  (that.lostuserdata.money = ""), //追债金额
                  (that.lostuserdata.resume_list = []), //工作履历
                  (that.resume_list = []), //工作履历
                  (that.imgstring = []),
                  (that.lostuserdata.img = []),
                  (that.lost_type_id = [""]),
                  (that.xueliname = ""),
                  (that.lostname = "");

                that.$toast({
                  message: "提交成功，待审核",
                  duration: 1000
                });
                that.$refs.upload.clearFiles();
              } else {
                that.$toast({
                  message: data.message,
                  duration: 1000
                });
              }
            },
            error: function (data) {
              console.log(JSON.stringify(data));
              that.$message({
                type: "success",
                center: true,
                message: data.message
              });
            }
          });
        }

      },
      // 显示免责声明
      showDisclarmer() {
        this.blacknameDisplay = false;
        this.displayDisclaimer = true;
      },
      // 隐藏免责声明，显示黑名单
      disBlackname() {
        this.blacknameDisplay = true;
        this.displayDisclaimer = false;
      }
    }
  };
</script>

<style>
  .blacktype {
    height: 100%;
  }

  .blacktype input {
    float: left;
    width: 23%;
    padding: 10px 7px;
  }

  .el-upload-list--picture-card .el-upload-list__item-status-label i {
    margin-top: -1px !important;
    margin-right: 2px !important;
  }

  .blackname .disnone {
    display: none;
  }

  @media screen and (max-width: 320px) {
    .blackname .mui-input-row label {
      width: 33% !important;
    }
    .blackname .upimgdiv {
      width: 90% !important;
    }
  }

  @media screen and (width: 414px) {
    .blackname .upimgdiv {
      width: 74% !important;
    }
  }

  .el-radio__label {
    font-size: 0.26rem;
    color: #999;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266 !important;
  }

  .el-input {
    font-size: 0.26rem;
  }

  .blackname .lvli input {
    width: 15%;
    text-align: left !important;
    margin-bottom: 0.1rem;
  }

  .blackname #nametype1 .item {
    float: left;
  }

  .blackname .upimgdiv {
    padding-top: 0.1rem;
    width: 90%;
    margin-left: 0.5rem;
  }

  .blackname .el-upload-list--picture-card .el-upload-list__item,
  .el-upload--picture-card {
    width: 1.7rem;
    height: 1.7rem;
    line-height: 1.7rem;
  }

  .blackname .el-cascader__label {
    text-align: right;
  }

  .blackname .diqu input {
    text-align: right;
    color: #666666 !important;
  }

  .blackname .el-cascader__label {
    color: #666666 !important;
  }

  .blackname #area {
    color: #333;
    width: 64%;
    text-align: right !important;
  }

  .blackname .sex .sexright {
    overflow: auto;
    position: absolute;
    right: 9px;
    width: 2.4rem;
  }

  .blackname .sex .el-radio {
    width: 0.3rem;
  }

  .blackname {
    background-color: #f8f8f8;
    padding-top: 0.88rem;
  }
  /* 头部 */

  .blackname .my_header {
    height: 0.88rem;
    background: #0085f0;
    text-align: center;
    color: #fff;
    line-height: 0.88rem;
    position: relative;
    padding: 0 0.3rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .blackname .my_header i {
    font-size: 0.4rem;
    float: left;
    line-height: 0.88rem;
  }

  .blackname .top1 {
    display: inline-block;
    margin-left: -0.2rem;
  }
  /* 表单样式 */

  .blackname .mui-input-row label {
    font-size: 0.3rem;
    color: #333;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    line-height: 0.4rem;
  }

  .blackname .mui-input-group .mui-input-row:after {
    left: 0rem;
  }

  .blackname .mui-input-group input:last-child {
    font-size: 0.26rem;
    color: #666;
    font-family: PingFang-SC-Medium;
    text-align: right;
  }

  .mui-input-group input {
    /* padding-right: 0; */
  }

  .blackname .mui-input-group .mui-input-row {
    height: 0.9rem;
    line-height: 0.9rem;
  }

  .blackname .star {
    color: #fe0000;
    font-size: 0.3rem;
  }

  .blackname .star1 {
    visibility: hidden;
  }

  .blackname #date {
    color: #666;
  }

  .blackname #label1 {
    width: 30%;
    padding-right: 0.1rem;
  }

  .mui-input-group:before {
    height: 0px;
  }

  #date.zhiwei {
    padding-right: 0rem;
    padding-left: 0.12rem;
  }

  .blackname #desp {
    text-align: right;
    width: 67%;
  }
  /* 上传证据 */

  .blackname #nametype1 {
    height: auto;
    padding: 0px 0px 10px 0px;
  }

  .blackname .picture {
    margin-top: 0.3rem;
    overflow: hidden;
  }

  .blackname .picture li {
    width: 1.7rem;
    height: 1.7rem;
    text-align: center;
    background-color: #f8f8f8;
    padding-top: 0.3rem;
    float: left;
    margin-bottom: 0.15rem;
  }

  .blackname .picture li:nth-child(3n-1) {
    margin-left: 0.15rem;
    margin-right: 0.15rem;
  }

  .blackname .picture li img {
    width: 0.64rem;
    height: 0.64rem;
  }

  .blackname .picture li img p {
    font-size: 0.24rem;
    color: #999;
  }
  /* 表单内容3 */

  .blackname .time {
    line-height: 0.88rem;
    padding-left: 0.3rem;
  }

  .blackname .time span {
    color: #666;
    font-size: 0.26rem;
  }
  /* 表单内容4 */
  /* 阅读并同意 */

  .blackname .agree {
    padding: 0.3rem;
  }

  .blackname .agree #inp {
    width: 0.4rem;
    height: 0.4rem;
    border-color: #0085f0;
    color: #0085f0;
  }

  .blackname .agree span {
    font-size: 0.24rem;
  }

  .blackname .agree a {
    color: #0085f0;
    font-size: 0.24rem;
    text-decoration: underline;
  }
  /* 提交按钮 */

  .blackname .button {
    text-align: center;
    color: #ffffff;
    padding: 0.3rem 0px 0.7rem;
  }

  .blackname .btn {
    width: 93%;
    height: 0.88rem;
    background: rgba(0, 133, 240, 1);
    border-radius: 0.15rem;
  }
  /* 免责声明样式 */
  /* 头部 */

  .blackname .my_header {
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    position: relative;
    padding: 0 .3rem;
    position: fixed;
    width: 100%;
    top: 0;
  }

  .blackname .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .blackname .top1 {
    display: inline-block;
  }
  /* 内容 */

  .blackname .title {
    padding: .57rem .44rem .3rem .6rem;
    background-color: #fff;
    /* margin-top: 0.7rem; */
  }

  .blackname .title h4 {
    text-align: center;
    line-height: .4rem;
    font-size: .3rem;
    color: #333;
    padding-bottom: .3rem;
  }

  .blackname .title p {
    text-indent: 2em;
    font-size: .26rem;
    color: #666;
    line-height: 0.5rem;
  }
</style>
